<!-- 培训台账 -->
<template>
  <div class="train-container">
    <div ref="searchRef" class="flex-center table-top">
      <SearchFrom
        ref="searchFormRef"
        exportUrl="/dms/api/v1/training/exportData"
        exportAuth="ALL_TRAINMANAGE_TRAINLEDGER_EXPORT_BTN"
        exportLabel="培训台账.xlsx"
        :getExportParams="getExportParamsFn"
        @search="search"
      />
    </div>
    <div v-loading="loading" class="table-content">
      <px-table height="calc(100vh - 310px)" :data="tableData" size="small" border class="common-table">
        <px-table-column prop="name" label="培训名称" min-width="120" show-overflow-tooltip />
        <px-table-column prop="typeName" label="培训类型" min-width="120" show-overflow-tooltip />
        <px-table-column prop="cover" label="封面" min-width="100" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.coverJSON === null || scope.row.coverJSON.length === 0">-</span>
            <px-image
              v-else
              :src="scope.row.coverJSON[0]?.fileUrl"
              :preview-src-list="scope.row.coverJSON.map(item => item.fileUrl)"
              :z-index="999999"
              class="table-img"
              fit="cover"
              preview-teleported
            />
          </template>
        </px-table-column>
        <px-table-column prop="departmentName" label="科室" min-width="120" show-overflow-tooltip />
        <px-table-column prop="trainingStatusName" label="状态" min-width="80" show-overflow-tooltip align="center">
          <template #default="scope">
            <span v-if="scope.row.trainingStatus === null" />
            <div v-else :class="[scope.row.trainingStatus === 'N' ? 'unPublished-status' : 'published-status']">
              <span :class="['status-point', scope.row.trainingStatus === 'N' ? 'unPublished-status-point' : 'published-status-point']" />
              <span class="status-span">{{ formatTrainingStatus(scope.row.trainingStatus) }}</span>
            </div>
          </template>
        </px-table-column>
        <px-table-column prop="updateByName" label="更新人" min-width="120" show-overflow-tooltip />
        <px-table-column prop="updateTime" label="更新时间" min-width="120" show-overflow-tooltip />
        <px-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="scope">
            <px-tooltip content="明细" placement="top">
              <px-button v-has="'ALL_TRAINMANAGE_TRAINLEDGER_DETAIL'" link type="primary" @click="handleDetail(scope.row)">
                <DetailIcon />
              </px-button>
            </px-tooltip>
            <px-tooltip content="总览" placement="top">
              <px-button v-has="'ALL_TRAINMANAGE_TRAINLEDGER_OVERVIEW'" link type="primary" @click="handleOverView(scope.row)">
                <OverviewIcon />
              </px-button>
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination v-show="total > 0" v-model:page="pageNum" v-model:limit="pageSize" class="table-pagination" :total="total" @pagination="search" />
    </div>
    <!-- 明细 -->
    <div v-if="detailVisible">
      <Details v-model:visible="detailVisible" :rowData="rowData" />
    </div>
    <!-- 总览 -->
    <div v-if="overViewVisible">
      <OverView v-model:visible="overViewVisible" :rowData="rowData" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import Details from "./component/details.vue";
import OverView from "./component/overView.vue";
import DetailIcon from "@/assets/svg/knowledge/detail.svg?component";
import OverviewIcon from "@/assets/svg/knowledge/overview.svg?component";
import SearchFrom from "../component/searchForm.vue";
import { getTrainConfigListAPI } from "@/api/knowledge/train";

defineOptions({
  name: "ALL_TRAINMANAGE_TRAINLEDGER"
});

const searchFormRef = ref();
const searchRef = ref();
const searchParams = ref();

const state = reactive({
  loading: false,
  tableData: [],
  pageNum: 1,
  pageSize: 20,
  total: 0,
  detailVisible: false,
  rowData: {},
  overViewVisible: false
});
const { loading, tableData, pageNum, pageSize, total, detailVisible, rowData, overViewVisible } = toRefs(state);

onMounted(() => {
  search();
});

const formatTrainingStatus = v => {
  const list = {
    N: "未发布",
    P: "已发布"
  };
  return list[v];
};

// 查询
const search = async p => {
  try {
    state.loading = true;
    searchParams.value = p;
    const params = {
      size: state.pageSize,
      current: state.pageNum,
      name: p ? p.name : "",
      type: p ? p.type : "",
      department: p ? p.className : ""
    };
    const res = await getTrainConfigListAPI(params);
    state.total = res.total;
    state.tableData = res.records;
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

const getExportParamsFn = () => {
  return {
    name: searchParams.value ? searchParams.value.name : "",
    type: searchParams.value ? searchParams.value.type : "",
    department: searchParams.value ? searchParams.value.className : ""
  };
};

// 明细
const handleDetail = row => {
  state.rowData = row;
  state.detailVisible = true;
};

// 总览
const handleOverView = row => {
  state.rowData = row;
  state.overViewVisible = true;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/trainManage/scss/common.scss");
// 单元格样式
:deep(.px-table__cell) {
  position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
}

.table-img {
  width: 40px;
  height: 40px;
}

.status-point {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
}

.unPublished-status {
  color: #f59e0b;
}

.unPublished-status-point {
  background: #f59e0b;
}

.published-status {
  color: #10b981;
}

.published-status-point {
  background: #10b981;
}
</style>
